<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-29 11:06:48
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-05-29 18:45:23
 * @FilePath: \guanggu_traffic\src\components\public\MapTools.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<el-sub-menu index="6">
		<template #title>工具箱</template>
		<el-menu-item index="6-1" @click="getLineStringLength"
			>测量距离</el-menu-item
		>
		<el-menu-item index="6-2" @click="getPolygonArea"
			>测量面积</el-menu-item
		>
		<el-menu-item index="6-3" @click="clearDraw">关闭测量</el-menu-item>
		<el-menu-item index="6-4" @click="exportImage">导出图片</el-menu-item>
	</el-sub-menu>
	<!-- 弹窗dom -->
	<div
		id="tools-popup"
		class="ol-popup"
		:style="{ display: popupText ? 'block' : 'none' }"
	>
		<a
			href="javascript:void(0)"
			@click="clearDraw"
			class="ol-popup-colser"
			>{{ popupText }}</a
		>
	</div>
</template>

<script setup>
import { onMounted, getCurrentInstance, ref } from 'vue'
import { createPopup } from '@/api/ol-api/popup'
import { FeatureToJson } from '@/api/ol-api/index'
import { saveAs } from 'file-saver'
import * as turf from '@turf/turf'
//获取地图实例
let map
const { proxy } = getCurrentInstance()
let popup = null
let popupText = ref(null)
//事件查询popup内容
const popupData = ref({})
/***
 * * 设置popup弹窗内容
 * @param {string} text 弹窗内容(可以是HTML字符串)
 * @param {Array} coordinate 弹窗位置(例:[114.30,30.50])
 * *************/
const setPopup = (text, data = {}, coordinate) => {
	//设置弹窗内容
	popupText.value = text
	popupData.value = data
	//设置弹窗位置
	popup.setPosition(coordinate)
}
//创建线图层
const line_source = new ol.source.Vector({
	features: [],
})
const line_layer = new ol.layer.Vector({
	source: line_source,
	zIndex: 9999,
})
//创建画笔-线
let drawLine = new ol.interaction.Draw({
	type: 'LineString',
	source: line_source,
})
// 监听线画笔
drawLine.on('drawend', (evt) => {
	const line = FeatureToJson(evt.feature)
	//最后一个点的位置(即Popup弹窗的位置)
	const coordinate = line.geometry.coordinates.slice(-1)[0]
	const length = turf.length(line).toFixed(3)
	setPopup(`当前线段长度为:\n${length}千米`, null, coordinate)
})
//创建面图层
const polygon_source = new ol.source.Vector({
	features: [],
})
const polygon_layer = new ol.layer.Vector({
	source: polygon_source,
	zIndex: 9999,
})
/*****
 * 创建面画笔
 * *************/
let drawArea = new ol.interaction.Draw({
	type: 'Polygon',
	source: polygon_source,
})
//监听面画笔
drawArea.on('drawend', (evt) => {
	const polygon = FeatureToJson(evt.feature)
	const center = turf.centerOfMass(polygon).geometry.coordinates
	const area = (turf.area(polygon) / 100000).toFixed(3)
	setPopup(`当前面积为:\n${area}平方千米`, null, center)
})
//线测量
const getLineStringLength = () => {
	//清除之前的画笔图层
	map.getInteractions().pop()
	map.addInteraction(drawLine)
}
//面测量
const getPolygonArea = () => {
	//清除之前的面图层
	map.getInteractions().pop()
	map.addInteraction(drawArea)
}
//关闭测量
const clearDraw = () => {
	//清空数据源
	line_source.clear()
	polygon_source.clear()
	//隐藏弹窗
	popupText.value = ''
	//清除交互
	map.getInteractions().pop()
	//关闭弹窗
	popup.setPosition(undefined)
}
//导出图片
const exportImage = () => {
	// if (
	// 	polygon_source.getFeatures().length == 0 ||
	// 	line_source.getFeatures().length == 0
	// ) {
	// 	ElMessage.error('请标绘图层再导出')
	// } else {
		
	// }
    try {
			map.once('postcompose', function (event) {
				const canvas = event.context.canvas
				canvas.toBlob(function (blob) {
					saveAs(blob, 'map.png')
				})
			})
			map.renderSync()
		} catch (error) {
			ElMessage.error('导出图片时发生错误', error)
		}
}
onMounted(() => {
	//获取地图对象
	map = proxy.$map
	//设置弹窗
	const container = document.querySelector('#tools-popup')
	//创建一个空的弹窗Overlay作为弹出窗口的容器
	popup = createPopup({
		container,
		map,
	})
	//将弹窗添加到司地图中
	map.addOverlay(popup)
	//添加绘图图层
	map.addLayer(line_layer)
	map.addLayer(polygon_layer)
})
</script>

<style lang="scss" scoped>
.ol-popup {
	width: 180px;
	box-sizing: border-box;
	position: absolute;
	background-color: white;
	-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
	padding: 15px;
	border-radius: 10px;
	border: 1px solid #cccccc;
	bottom: 22px;
	left: 50%;
	transform: translateX(-50%);
	min-width: 100px;
	z-index: 100;
}

.ol-popup:after,
.ol-popup:before {
	top: 100%;
	border: solid transparent;
	content: ' ';
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.ol-popup:after {
	border-top-color: white;
	border-width: 10px;
	left: 50%;
	transform: translateX(-50%);
}

.ol-popup:before {
	border-top-color: #cccccc;
	border-width: 11px;
	left: 50%;
	transform: translateX(-50%);
}

.ol-popup-closer {
	text-decoration: none;
	position: absolute;
	top: 2px;
	right: 8px;
}

.ol-popup-closer:after {
	content: '✖';
}

#popup-content {
	font-size: 14px;
	font-family: '微软雅黑';
}

#popup-content .markerInfo {
	font-weight: bold;
}
</style>
